<template>
  <div class="preview">
    <div class="preview-canvas" :style="canvasStyle">
      <component
        :is="areaTypeComponent[item.type]"
        v-for="item in componentData"
        :id="`component${item.id}`"
        :key="item.id"
        :style="getComponentStyle(item)"
        class="component"
        :element="item"
      />
    </div>
  </div>
</template>
<script>
import Shape from '@/components/Editor/Shape.vue'
import { getStyle } from '@/utils/style'
import { areaTypeComponent } from '@/custom-component/component-list'

export default {
  name: 'Preview',
  components: { Shape },
  data() {
    return {
      areaTypeComponent,
      curPageIndex: 0,
      playLong: 0,
      pageData: [
        {
          width: 1920,
          height: 1080,
          pageName: '页面1',
          bgImg: '',
          bgColor: '#000000',
          bgName: '',
          pageTime: 24,
          playTimes: '1',
          playLong: '60',
          pagePlayTime: '1',
          timing: '0',
          scale: 100,
          componentData: [
            {
              type: 1,
              rotate: 0,
              opacity: 1,
              top: 13,
              left: 19,
              width: 200,
              height: 200,
              zIndex: 1,
              borderSW: '0',
              borderType: 1,
              borderEffect: 1,
              borderSpeed: 1,
              picStyleIn: 10,
              picStyleOut: 10,
              picShowTime: 5,
              picStyleInTime: '5',
              picStyleOutTime: '5',
              siderType: 0,
              picScaleType: 0,
              playTimes: 6,
              pauseTime: 5,
              rotation: 0,
              srcGroup: [
                {
                  storagePath:
                    'https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg',
                  name: '图片素材',
                  id: '7412b860-b00e-11f0-9127-871e9911980a',
                  src: 'https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg',
                  size: 0,
                  time: 0,
                  playTimes: 0,
                  editName: '',
                  picShowTime: 2,
                },
                {
                  storagePath:
                    'https://img1.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082',
                  name: '图片素材2222',
                  id: '7412b861-b00e-11f0-9127-871e9911980a',
                  src: 'https://img1.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082',
                  size: 0,
                  time: 0,
                  playTimes: 0,
                  editName: '',
                  picShowTime: 2,
                },
              ],
              id: '70a15f60-b00e-11f0-9127-871e9911980a',
            },
          ],
          id: '3fbeeb80-791b-11f0-8e4c-098d1b206ae5',
        },
      ],
      animationFrame: null,
    }
  },
  computed: {
    componentData() {
      return this.pageData[this.curPageIndex].componentData
    },
    canvasStyle() {
      const { width, height, bgColor, bgImg } = this.pageData[this.curPageIndex]
      return {
        width: `${width}px`,
        height: `${height}px`,
        'background-color': bgColor,
        'background-image': `url(${bgImg})`,
        'background-size': '100% 100%',
      }
    },
  },
  mounted() {
    this.updatePlayLong()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
  },
  methods: {
    getComponentStyle(style) {
      return getStyle(style, this.svgFilterAttrs)
    },
    updatePlayLong() {
      this.playLong += 16 // 每次更新增加16毫秒（约等于每秒60帧）
      this.checkAndSwitchPage()
      this.animationFrame = requestAnimationFrame(this.updatePlayLong.bind(this))
    },
    checkAndSwitchPage() {
      const currentPage = this.pageData[this.curPageIndex]
      if (this.playLong >= currentPage.playLong * 1000) {
        // 切换到下一个页面
        this.curPageIndex++
        if (this.curPageIndex >= this.pageData.length) {
          // 如果已经是最后一个页面，可以重置或结束播放
          this.curPageIndex = 0 // 或者停止播放
        }
        this.playLong = 0 // 重置播放时长
      }
    },
  },
}
</script>

<style scoped lang="scss">
.preview {
  width: 100%;
  height: 100vh;
  overflow: auto;
  &-canvas {
    position: relative;
  }
}
</style>
